<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-02-06 11:13:52
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-02-07 22:55:17
 * @FilePath: NewsInfo.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-02-06 11:13:52
 * @Description: 
-->
<template>
  <div class="content">
    <ul class="infinite-list">
      <li v-for="(item, index) in newsList" :key="index" @click="toPage(item)" class="infinite-list-item">
        <div class="orange-square">&nbsp;&nbsp;&nbsp;{{ item.informationTheme }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import {listnewsInfo} from '@/api/home'
import store from '@/store'
export default {
  name: 'newsInfo',

  data() {
    return {
      newsList: []
    };
  },

  created() {
    this.getData()
  },

  methods: {
    getData() {
      listnewsInfo({
        pageNum: 1,
        pageSize: 9
      }).then(res => {
        this.newsList = res.rows
      })
    },
    toPage(item) {
      this.$router.push("/news")
      store.commit('setItem', item)
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.infinite-list {
  padding: 0;
}
.orange-square {
  width: 6px; /* 正方形边长 */
  height: 6px; /* 正方形边长 */
  background-color: orange; /* 橙色背景 */
  display: inline-block; /* 可选，使其与其他元素并排显示 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直方向上居中 */
}
.infinite-list-item {
  height: 50px;
  margin: 10px 0 ;

  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直方向上居中 */

  font-size: 16px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  white-space: nowrap; /* 不换行 */
  overflow: hidden;    /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  background-color: rgb(254, 251, 251);
}
.infinite-list-item:hover {
  cursor: pointer;
}
</style>